<template>
  <div class="register">
      <van-nav-bar fixed title="Meal" left-arrow :border="false" @click-left="goBack"/>
    <div class="register-container container">
      <div class="register-form">
        <!-- <p class="title">支付</p> -->
        <div class="form">
          <div class="pay-inner">
            <div class="pay-inner-item">
              <span></span>
              <p>{{ $t('component.pay.1') }}：<b style="color:#fb8c24">{{user.balance | num2Money}}</b> KZ</p>
            </div>
            <div class="pay-inner-item">
              <span></span>
              <p>{{ $t('component.pay.2') }}：<b style="color:#fb8c24">{{price | num2Money}}</b> KZ</p>
            </div>
          </div>
          <div class="method">
            <div class="pay-inner-item">
              <span></span>
              <p>{{ $t('component.pay.3') }}：</p>
            </div>
            <div class="pay-method-out">
              <div v-for="(item,index) in methods" :key="index" @click="changeCss(index)">
                <div :class="activeIndex===index?'pay-method active':'pay-method'">
                  <img :src="domain + item.img" alt="">
                  <span>{{item.name}}</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="button">
        <div class="attention">
          Nota: O saldo em conta apenas pode ser utilizado para compra de Destaques ou Anúncios unitários.
        </div>
        <div style="width: 100%;text-align: right;margin-top:20px">
             <cu-button @click="submitPay">{{ $t('register.11') }}</cu-button>
        </div>

      </div>
    </div>
    <!-- 支付密码弹框 -->
<!--    <van-dialog v-model="attentionVisible" :showConfirmButton="false">-->
<!--      <div style="margin:20px 10px 10px">-->
<!--          <van-field v-model="submitForm.payPassword" type="password" label="password" />-->
<!--        &lt;!&ndash; <el-input placeholder="password" v-model="submitForm.payPassword" show-password></el-input> &ndash;&gt;-->
<!--      </div>-->
<!--      <div style="width: 100%;text-align: center;margin:20px 0">-->
<!--          <cu-button @click="submitPay">Confirmar</cu-button>-->
<!--      </div>-->
<!--    </van-dialog>-->
  </div>
</template>
<script>
import Api from '@/api';
import CuButton from '@/components/button';
import { Domain } from '@/constants';
export default {
  name: '',
  components: {CuButton},
  data() {
    return {
      // methods:[{img:'/group1/default/20210207/18/41/4/logo_new.png',name:"Saldo"}],
      methods:[{img:'/group1/default/20210224/14/35/4/favicon.png',name:"Saldo"}],
      activeIndex:0,
      user:{},
      domain: Domain,
      price:null,
      submitForm:{},
      attentionVisible:false
    };
  },
  created() {
    this.price = this.$route.query.price
    // this.submitForm.payPassword =
    this.submitForm.orderId = this.$route.params.id
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      Api.loadUser().then((res) => {
        this.user = res;
      });
    },

    handleSubmit() {
      if(parseFloat(this.user.balance) < this.price){
        this.$toast.error('Saldo insuficiente')
        return false
      }
      this.attentionVisible = true

    },
    submitPay(){
      Api.payMealOrder(this.submitForm).then(res=>{
        if(res.id){
          this.$router.push('/account')
        }
      })
    },
    goBack(){
      this.$router.go(-1)
    },
    changeCss(i){
      this.activeIndex = i
    }
  },
};
</script>
<style lang="scss" scoped>
.register {
  display: flex;
  flex-direction: column;
  background: #f2f2f2;
  .register-container {
    padding: 50px 0;
    padding-bottom: 100px;
    width: 100%;
    flex: 1;
    .register-form {
      padding: 20px;
      background: #fff;
      border-radius: 4px;
      .title {
        color: #333;
        font-weight: bold;
        font-size: 18px;
        padding-left: 15px;
        margin-top: 20px;
        margin-bottom: 20px;
        // text-align: center;
        letter-spacing: 1px;
      }
      .form {
        width: 90%;
        margin: auto;
      }
    }
  }
}


  .pay-inner{
    width: 100%;
    border-bottom: 1px dashed #f2f2f2;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .pay-inner-item{
      display: flex;
      align-items: center;
      width: 50%;
      margin-bottom: 10px;
      span{
        width: 8px;
        height: 8px;
        background-color: #fb7924;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  .method{
    .pay-method-out{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      .pay-method{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background-color: #f8f8f8;
        margin-right: 40px;
        cursor: pointer;
        img{
          width: 40px;
          height: 40px;
          margin-bottom: 10px;
        }
      }
      .active{
        border: 1px solid #fb7924;
        // transform: scale(1.1);
        // background-color: #fff;
        // color: #fb7924;
      }
    }
  }
  .button{
      width: 90%;
      margin: auto;
      display: flex;
      flex-direction: column;
    .attention{
      color: #999;
      font-size: 12px;
    }
    background-color: #fff;
    margin-top: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
   .dialog-attention{
   width:50%;
   text-align:center;
   background-color: #fff;
   padding:30px 40px;
   padding-top: 0px;
   line-height: 28px;
   text-align: left;
   color: #595959;
   margin: auto;
   .attention{
     font-size: 18px;
     text-align: center;
   }
 }
 .van-cell{
     background-color: #f5f5f5;
 }
</style>
